<template>
  <div :class="`${nodeClass.replace('.', '')}`">
    <el-tooltip
      effect="light"
      :content="`${nodeData.nodeNameEn}(${nodeData.nodeNameCn})`"
      placement="top"
      :disabled="disabledToolTip"
    >
      <div class="node-page" :style="nodeStyle">
        <label class="node-label" v-show="isShowLabel" :title="`${nodeData.nodeNameEn}(${nodeData.nodeNameCn})`">{{
          `${nodeData.nodeNameEn}`
        }}</label>
        <div v-if="nodeData.hasDirection" class="icon-content" :style="{ transform: `rotate(${angleDirection}deg)` }">
          <div class="icon-arrow" :style="{ background: borderColor }">
            <div class="arrow" :style="{ borderColor }"></div>
          </div>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts" name="nodePoint">
import { ref, onMounted, inject } from "vue";
import { Node } from "@antv/x6";
import { nodeTypeList } from "@/enums/nodeType";
import { NodePoint } from "@/utils/antvx6/nodePoint";
const nodeP = new NodePoint();
const nodeStyle = ref({
  width: `${nodeP.size}px`,
  height: `${nodeP.size}px`,
});
const getNode: Function | undefined = inject<Function>("getNode");
const nodeData = ref({
  angle: 0,
  nodeNameEn: "",
  nodeNameCn: "",
  hasDirection: 0,
});
const node = getNode?.() as Node;
const nodeClass = ref(`.node-id-${(Math.random() * 1000000).toFixed(0)}`);
const disabledToolTip = ref<boolean>(false);
const isShowLabel = ref<boolean>(true);
const nodeColor = ref<string>("");
const borderColor = ref<string>("");
const angleDirection = ref<number>(0);

onMounted(() => {
  nodeData.value = node.getData();
  angleDirection.value = nodeData.value.angle * -1;
  nextTick(() => {
    formatData();
    // 编辑成功动态更新地图元素样式
    node.on("change:data", ({ current }) => {
      nodeData.value = current;
      formatData();
    });
    // 显示隐藏节点
    node.on("change:isShowNode", ({ current }) => {
      if (node.getData().mapNodeType === 8) return;
      const attrs = node.getAttrs();
      attrs.body.isCanSelection = current; // 禁止节点框选
      node.setAttrs(attrs);
      formatData(current ? "" : "#FFFFFF00", current ? "" : "#FFFFFF00");
    });
    // 显示隐藏节点站点
    node.on("change:isShowStation", ({ current }) => {
      if (node.getData().mapNodeType === 8) {
        const attrs = node.getAttrs();
        attrs.body.isCanSelection = current;
        node.setAttrs(attrs);
        formatData(current ? "" : "#FFFFFF00", current ? "" : "#FFFFFF00");
      }
    });

    // 显示隐藏label弹窗提示组件
    node.on("change:isShowToolTip", ({ current }) => {
      disabledToolTip.value = !current;
    });
    // 显示隐藏节点Label
    node.on("change:isShowLabel", ({ current }) => {
      isShowLabel.value = current;
    });

    // 显示隐藏装点磁体
    node.on("change:isShowPortMagnet", ({ cell, current }) => {
      cell.setPortProp("group1", "attrs/circle", {
        magnet: current,
      });
    });

    // 调整节点角度方向，接收正180~负180参数，箭头标识上为正下为负，节点方向显示相反需*-1
    node.on("change:angleDirection", ({ current }) => {
      angleDirection.value = current * -1;
    });
  });
});

function formatData(nColor?: string, bColor?: string) {
  const _newValue: any = nodeData.value;
  nodeColor.value = nColor || nodeTypeList.filter((item) => item.value === _newValue.mapNodeType)[0].nodeColor;
  borderColor.value = bColor || nodeTypeList.filter((item) => item.value === _newValue.mapNodeType)[0].borderColor;

  // 更新标签位置
  const labelE = document.querySelector(`${nodeClass.value} .node-label`) as HTMLElement;
  labelE && (labelE.style.left = `-${labelE.offsetWidth / 2 - 5}px`);

  // 更新桩点颜色
  node.setPortProp("group1", "attrs/circle", {
    fill: nodeColor.value,
    stroke: borderColor.value,
  });
}
</script>
<style scoped lang="scss">
.node-page {
  border-radius: 50%;
  position: relative;

  .node-label {
    color: #fff;
    top: -18px;
    left: 0;
    opacity: 1;
    font-size: 10px;
    text-wrap: nowrap;
    position: absolute;
  }
  .icon-content {
    width: 100%;
    height: 100%;
    .icon-arrow {
      width: 6px;
      height: 1px;
      top: 50%;
      left: 100%;
      position: relative;
      .arrow {
        width: 4px;
        height: 4px;
        right: 0;
        top: -2px;
        border-top: 1px solid;
        border-right: 1px solid;
        transform: rotate(45deg);
        position: absolute;
      }
    }
  }
}
</style>
